<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>
	<style>
		body {
			background: url("../images/1.jfif");
			background-repeat: no-repeat;
			background-size: 100% auto;
		}

		#login-box {
			width: 375px;
			height: 375px;
			margin: 0 auto;
			margin-top: 13%;
			text-align: center;
			background-color: rgba(244, 251, 251, 0.5)
		}

		#login-box h1 {
			padding-top: 30px;
			color: #fff;
		}

		#login-box .form .item {
			margin-top: 15px;
		}

		#login-box .form .item i {
			font-size: 18px;
			color: #fff;
		}

		#login-box .form .item input {
			width: 180px;
			font-size: 18px;
			border: 0;
			border-bottom: 2px solid #fff;
			padding: 5px 10px;
			background: #ffffff00;
			color: #fff;
		}

		#login-box button {
			margin-top: 20px;
			width: 190px;
			height: 30px;
			font-size: 20px;
			font-weight: 700;
			color: #fff;
			background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
			border: 0;
			border-radius: 15px;
		}
	</style>
</head>

<body>
	<div id="login-box">
		<h1 style="text-align: center;color: #333;">登录</h1>
		<p>账号:&nbsp;&nbsp;&nbsp;&nbsp;
			<input id="email" type="text">
		</p>
		<p>密码:&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="password" name="pwd"><label id="password_trip"></label></p>
		</p>

		<div style="text-align: center;margin-top: 30px;">
			<input type="button" class="button" value="提交">
		</div>
	</div>
	<script>
		let pwd = document.getElementsByName('pwd')[0];
		let username = document.getElementById('email')
		let ipt = document.querySelectorAll("input")
		// console.log(ipt[2]);
		ipt[2].onclick = async function () {
			let { data } = await axios.get("http://www.zhibao.com:3000/users");


			// find
			let obj = data.find(item=>{
				console.log(item);
				// if (item.user === username.value && item.pwd === pwd.value) {
				// 	console.log('进来了');
				// 	// window.location.href="./center.html"
				// } else {
				// 	// alert("您输入的用户名或密码错误，请重新输入")
				// 	console.log('错误')
				// }

				// find函数 是只要返回真，他就返回当前循环的这个对象。
				return item.user === username.value && item.pwd === pwd.value;
			});

			console.log(obj);

			if(obj){
				window.location.href = './center.html'
			}else{
				alert('抱歉，账号密码错误')
			}

			// data.forEach(item => {
			// 	console.log(item);
			// 	console.log(username.value,pwd.value);
			// 	if (item.user === username.value && item.pwd === pwd.value) {
			// 		console.log('进来了');
			// 		// window.location.href="./center.html"
			// 	} else {
			// 		// alert("您输入的用户名或密码错误，请重新输入")
			// 		console.log('错误')
			// 	}
			// });
		}
	</script>
</body>

</html>